<template>
    <div class="couponsbagadd">
        <div class="outmain ba_f heighthv pad_20 bor_rad5">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>创建弹窗优惠券活动</span>
                </div>
            </div>
            <div class="mar_t20 flex-bet flex-y-top">
                <div class="flex-g-1">
                    <el-form ref="form" :model="form" label-width="180px">
                        <el-form-item label="活动名称" :required='true' prop="name">
                            <el-input v-model="form.name" placeholder="请输入活动名称"></el-input>
                        </el-form-item>
                        <el-form-item label="活动时间" :required='true'>
                            <el-date-picker
                                    v-model="timeData"
                                    type="datetimerange"
                                    align="right"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-time="['08:00:00', '23:59:59']">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="发券位置" :required='true'>
                            <el-radio-group v-model="form.location">
                                <el-radio label="1">外卖点单页</el-radio>
                                <el-radio label="2">堂食点单页</el-radio>
                                <el-radio label="3">快餐点单页</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="适用门店" :required='true'>
                          <el-radio-group v-model="form.storeType">
                            <el-radio label="1">仅本店可用</el-radio>
                            <el-radio label="2">全店通用</el-radio>
                            <el-radio label="3">指定门店可用</el-radio>
                          </el-radio-group>
                          <div v-show="form.storeType=='3'">
                            <el-scrollbar>
                              <div class="recordBox">
                                <el-table ref="multipleTable" :data="shopTable" tooltip-effect="dark" style="width: 100%">
                                  <el-table-column prop="name" label="门店名称"></el-table-column>
                                  <el-table-column prop="address" label="门店地址"></el-table-column>
                                  <el-table-column label="操作">
                                    <template slot-scope="scope">
                                      <div class="textbutton">
                                        <el-button size="mini" type="text" @click="open2(scope.row,scope.$index)" class>删除</el-button>
                                      </div>
                                    </template>
                                  </el-table-column>
                                </el-table>
                              </div>
                            </el-scrollbar>
                            <div class="addgoods textbutton">
                              <i class="el-icon-plus subjectcolor2"></i>
                              <el-button type="text" class @click="addshop(shopTable)">添加门店</el-button>
                            </div>
                          </div>
                          <div class="yb_margin lh16">全店通用、指定门店可用不适用于门店模式三</div>
                        </el-form-item>
                        <el-form-item label="选择人群" :required='true'>
                            <el-radio-group v-model="form.people">
                                <el-radio label="1">全部人群</el-radio>
                                <el-radio label="2">新客</el-radio>
                                <el-radio label="3">老用户</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="选择券" :required='true' prop="coupon">
                            <div class="">
                                <el-select v-model="form.coupon" multiple filterable placeholder="请选择优惠券">
                                    <el-option v-for="item in comgrouping" :key="item.id" :label="item.name"
                                               :value="item.id"></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item label="背景图片">
                            <div class="uploadSource bor_de rel flex" v-if="form.icon">
                                <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)">
                                    <i class="el-icon-check" ref="imgicon1"></i>
                                    <i class="el-icon-close" @click="deleteMultiImage(form.icon,1)"></i>
                                </label>
                                <img :src="form.icon" @click='test(1)' class="wid"/>
                            </div>
                            <div class="uploadSource flex-center curs" v-else @click='test(1)'>
                                <i class="el-icon-plus fon_40 color_d9"></i>
                            </div>
                            <div class="yb_margin">背景图片建议尺寸：632*845<a class="mar_l20" @click="tishiImg()">查看示例</a></div>
                        </el-form-item>
                    </el-form>
                </div>
                <el-dialog title="示例图片" :visible.sync="dialogTableVisible4" :close-on-click-modal='false' width="600px" class="tishidialog">
                    <div class="t_c">
<!--                        <el-image src="../../../assets/img/channel/wincoubg.png" fit="cover" style="width: 200px;height: 400px;"></el-image>-->
                        <img src="../../../assets/img/channel/wincoubg.png" style="width: 200px;height: 300px;" class="mar_l20">
                    </div>
                </el-dialog>
                <div class="flex-g-0 pad_lr_20">
                    <div class="fon_16">常见问题</div>
                    <el-collapse v-model="collapseName" accordion class="mar_tb10" style="width: 260px">
                        <el-collapse-item title="什么是弹窗优惠券？" name="1">
                            <div>弹窗优惠券主要是针对不同的用户群体，推送相对应的优惠券活动，提高下单率。</div>
                        </el-collapse-item>
                        <el-collapse-item title="哪些用户可以享受弹窗优惠券活动" name="2">
                            <div>弹窗优惠券可以选择门店新客、老客户等用户</div>
                        </el-collapse-item>
                    </el-collapse>
                    <div class="fon_16 mar_t20">活动规则</div>
                    <div class="color_9 mar_t10 lh30 fon_13">
                        <div>1.活动仅限在线支付订单；</div>
                        <div>2.活动成本由商家承担，与店铺其他活动默认同享</div>
                        <div>3.用户需要点击领取才能领取优惠券</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="submitForm">立即创建</el-button>
        </div>
        <attachment-img ref="img1" type="img" @attachment='imgadd1'></attachment-img>
      <shopEdit ref="ShopEdit" @fetchData="shopListData"></shopEdit>
    </div>
</template>
<script>
    import {getSaveWindowCoupon,postSaveWindowCoupon} from "@/api/plug";
    import {getSelectCoupon} from "@/api/user";
    import {changeDate} from "@/utils/index";
    import attachmentImg from "@/plugins/attachment-img";
    import shopEdit from '@/views/plugin/plug/components/selectshop';


    export default {
        created() {
            if (this.$route.query.id) {
                this.id = this.$route.query.id
                this.edit()
            }
            this.getSelectCoupon()
        },
        components: {attachmentImg,shopEdit},
        data() {
            return {
                form: {
                    name: '',
                    icon: '',
                    coupon: [],
                    location: '1',
                    people: '1',
                    storeType: '1',
                },
                comgrouping:[],
                timeData: [new Date(),new Date().setMonth(new Date().getMonth() + 3)],
                collapseName:'',
                dialogTableVisible4:false,
                shopTable: []
            }
        },
        methods: {
            async shopListData(data) {
              this.shopTable = data ? data : [];
            },
            open2(row, index) {
              this.$delete(this.shopTable, index);
            },
            addshop(row) {
              if (row) {
                const storeIds = row.map((item) => item.id);
                this.$refs['ShopEdit'].showEdit(storeIds);
              } else {
                this.$refs['ShopEdit'].showEdit();
              }
            },
            async getSelectCoupon(){
                const {data} = await getSelectCoupon()
                this.comgrouping = data?data:[]
            },
            async edit(){
                const {data} = await getSaveWindowCoupon({id: this.id})
                this.form2 = this.form
                this.form = Object.assign(this.form2, data);
                if(data.startTime){
                    this.timeData = [data.startTime,data.endTime]
                }
              if (data.storeInfo) {
                this.shopTable = data.storeInfo ? data.storeInfo : [];
              }
            },
            enter(i=0){
                this.$refs['imgicon' + i].style.display = 'none'
            },
            leave(i=0){
                this.$refs['imgicon' + i].style.display = 'inline-block'
            },
            test(i = 0) {
                console.log(this.$refs, i)
                this.$refs['img' + i].dialogVisible = true
            },
            imgadd1(url) {
                this.form.icon = url.str
            },
            deleteMultiImage(item, index, type) {
                //typem没传是单图multigraph多图；index上传图片组件排序
                Array.prototype.remove = function (val) {
                    var index = this.indexOf(val);
                    if (index > -1) {
                        this.splice(index, 1);
                    }
                };
                if (type == 'multigraph') {
                    switch (index) {
                        case 2:
                            this.form2.environment.remove(item);
                            break
                    }
                } else {
                    switch (index) {
                        case 1:
                            this.form.icon = '';
                            break
                    }
                }
            },
            tishiImg(){
                this.dialogTableVisible4 = true
            },
            async submitForm() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        if(this.timeData){
                            this.form.startTime  = changeDate(this.timeData[0]);
                            this.form.endTime = changeDate(this.timeData[1]);
                        }
                        if (this.shopTable) {
                          this.form.storeArr = this.shopTable.map((item) => item.id);
                        }
                        const {msg} = await postSaveWindowCoupon(this.form);
                        this.$baseMessage(msg, "success");
                        this.$router.go(-1)
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>
